<template>
  <view class="page-wraper">
    <customNav
      class="header-class"
      bgColor="#ffffff00"
      backIconColor="black"
      @shareBack="shareBack"
    ></customNav>
    <view class="contentViewBox">
      <view class="swiper_box">
        <swiper
          class="imageSwiperClass"
          circular="false"
          vertical="false"
          display-multiple-items="1"
          :autoplay="true"
          :vertical="false"
        >
          <swiper-item
            v-for="(item, index) in dataObject.cover_url"
            :key="index"
          >
            <!-- 支付宝小程序需要添加view点击才能生效 -->
            <!-- <view @click="swiperClick(item)"> -->
			<view :style="{background: 'url('+dataObject.cover_url[index]+')'}" class="swiper-bg-img" @click.stop="swiperItemHandler(index)"></view>
            <!-- </view> -->
          </swiper-item>
        </swiper>
      </view>
      <!-- 角标 -->
      <view class="swiper-item-text swiper-item-absolute"></view>
    </view>
    <view class="details-content-box">
      <view class="config-share-box" v-if="false">
        <view class="config-share1"></view>
        <view class="config-share-view" @click="btnClick(1)" v-if="false">
          <image class="image-icon-class" src="@/static/config.png"></image>
          <view class="config-share-text">配置</view>
        </view>
        <view class="config-share-view-box">
          <view class="config-share-view" @click="btnClick(2)">
            <image class="image-icon-class" src="@/static/share.png"></image>
            <view class="config-share-text">分享</view>
          </view>
          <button class="shareBtn" open-type="share"></button>
        </view>
      </view>
      <view class="price-view-box">
        <view class="price-view-text">{{ dataObject.price }}</view>
        <view class="price-view-wan">万</view>
      </view>
      <view class="aasda">
        <view class="view-box">
          <view class="new-price-box-class">
            <view class="new-price" v-if="dataObject.guide_price"
              >指导价格：{{ dataObject.guide_price }}万</view
            >
            <view class="new-price" v-if="dataObject.purchase_tax"
              >购置税：{{ dataObject.purchase_tax }}万</view
            >
          </view>
          <view class="car-title">{{ dataObject.cars_name }}</view>
        </view>

        <view class="view-box-1">
          <view class="car-box">
            <view class="car-content-title">车辆信息</view>
            <view class="content-text">VIN码：{{ dataObject.vin_code }}</view>
          </view>
          <view class="dangan-box">
            <view class="dangan-text">档案</view>
            <carinfo class="dangan-content" :data="danganContentData" />
          </view>
          <view class="dangan-box" v-if="dataObject.describe">
            <view class="dangan-text-miaoshu">描述</view>
            <view class="dangan-content refer-view-class refer-text-class">
              {{ dataObject.describe ? dataObject.describe : "" }}
            </view>
          </view>
        </view>
        <view class="view-box-3" v-if="dataObject.logistics">
          <view class="car-content-title marginleft22">物流报价</view>
          <view class="logistics-price-view-box">
            <view class="content-row">
              <view class="logistics-price-view-item-box">
                <view class="logistics-price-text-view">始发地</view>
                <view class="logistics-price-city-text-name">
                  {{
                    dataObject.logistics
                      ? dataObject.logistics.start_city_name
                      : ""
                  }}
                </view>
              </view>
              <view
                v-if="dataObject.logistics"
                class="logistics-price-view-item-box"
              >
                <image
                  class="single_Arrow_image_class"
                  src="@/static/single_Arrow.png"
                  mode="widthFix"
                >
                </image>
                <view class="logistics-price-text-view-class">
                  参考价：{{
                    dataObject.logistics ? dataObject.logistics.price : "2000"
                  }}</view
                >
              </view>
              <view class="logistics-price-view-item-box">
                <view class="logistics-price-text-view">目的地</view>
                <view
                  class="logistics-price-city-text-name"
                  v-if="
                    !dataObject.logistics ? (!endName ? false : true) : true
                  "
                >
                  {{
                    dataObject.logistics
                      ? dataObject.logistics.end_city_name
                      : endName
                  }}
                </view>
              </view>
            </view>
            <view class="more-logistcs-price-btn" @click="btnClick(3)">
              <view>更多物流报价</view>
              <image
                class="logistics-price-white-right"
                src="@/static/white-right.png"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <view class="view-box-2">
        <view class="car-content-title">车辆信息</view>
        <view class="location-box" @click="dealerHandler">
          <image
            class="location-image-head"
            :src="dataObject.business.imageurl"
            v-if="dataObject.business"
          >
          </image>
          <view class="location-view-box" v-if="dataObject.business">
            <view class="car-store-text">{{ dataObject.business.name }}</view>
            <view class="car-location-text">
              {{
                dataObject.business.company_address
                  ? dataObject.business.company_address
                  : ""
              }}
            </view>
          </view>
          <image
            class="location-image-icon"
            src="@/static/location-details.png"
            @click.stop="locationClick()"
          >
          </image>
        </view>
        <view
          class="car-content-title"
          v-if="
            dataObject.cover_url
              ? dataObject.cover_url.length > 0
                ? true
                : false
              : false
          "
          >车辆实拍</view
        >
        <image
          class="image-view-bg"
          :src="dataObject.cover_url[0]"
          mode="aspectFill"
          @click="previewImagePage(0)"
          v-if="
            dataObject.cover_url
              ? dataObject.cover_url.length > 0
                ? true
                : false
              : false
          "
        ></image>
        <view
          class="iamge-view-small-box"
          v-if="
            dataObject.cover_url && dataObject.cover_url.length > 1
              ? true
              : false
          "
        >
          <image
            class="iamge-view-small"
            :src="dataObject.cover_url[1]"
            mode="aspectFill"
            @click="previewImagePage(1)"
            v-if="
              dataObject.cover_url && dataObject.cover_url.length > 1
                ? true
                : false
            "
          ></image>
          <image
            class="iamge-view-small"
            :src="dataObject.cover_url[2]"
            mode="aspectFill"
            @click="previewImagePage(2)"
            v-if="
              dataObject.cover_url && dataObject.cover_url.length > 2
                ? true
                : false
            "
          ></image>
          <view class="iamge-view-small" v-else></view>
        </view>
        <view
          class="look-all-image-view"
          @click="btnClick(4)"
          v-if="
            dataObject.cover_url && dataObject.cover_url.length > 0
              ? true
              : false
          "
          >查看全部图片
        </view>
        <view class="footer-view"></view>
      </view>
    </view>

    <view class="page-footer">
      <view
        class="item_box"
        @click="footerClick(1)"
        v-if="
          dataObject.business
            ? dataObject.business.type_name == '商家'
              ? true
              : false
            : false
        "
      >
        <image class="footer-image-icon-class" src="@/static/store.png"></image>
        <view class="footer-text-class">店铺</view>
      </view>
      <view class="item_box" @click="footerClick(2)" v-if="collectIsShow">
        <image
          class="footer-image-icon-class"
          src="@/static/save.png"
          v-if="dataObject.collect == 0"
        ></image>
        <image
          class="footer-image-icon-class"
          src="@/static/save-select.png"
          v-if="dataObject.collect == 1"
        >
        </image>
        <view class="footer-text-class">收藏</view>
      </view>
      <view class="item_buy" @click="footerClick(3)"> 联系卖家 </view>
    </view>
  </view>
</template>

<script>
import customNav from "@/components/custom-nav/custom-nav.vue";
import carinfo from "@/secondhandCar/carinfo/carinfo.vue";
import { getUsedCarDetails, collectionUpdate } from "@/api/secondhandCar.js";
import { wxShare } from "@/api/base.js";
export default {
  components: {
    customNav,
    carinfo,
  },
  data() {
    return {
      title: "",
      imageUrl: "",
      isShareEnterPage: false,
      collectIsShow: true,
      logistics_price: 222,
      carId: "",
      users_id: "",
      endName: "",
      collectionUpdatePost: {
        state: "2", //1：新车 2：二手车
        users_id: "", //用户id
        cars_id: "", //车源id
      },

      dataObject: {
        /*
					"id": "7FC89D2E-44E0-518F-8DF5-41AE5D5CDA8B",
					"users_id": "510E9895-4D7E-6007-ADEB-8932689F7BFE",
					"cover_url": [
						"http://atlas.cst365.top/uploads/api/picture/202306/411952dbc4199eea77f5334091476a59.jpg",
						"https://img1.baidu.com/it/u=4165578538,1160484955&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
						"https://img1.baidu.com/it/u=4165578538,1160484955&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
					],
					"vin_code": "121231",
					"brand_id": "DA9A1477-5DE7-898D-AE4D-BB85B1D09AEE",
					"series_two_id": "F19556B6-2CDA-1C09-E524-87C7B26B13C4",
					"model_two_id": "6C5E8A6B-3AEB-0D7F-D8AC-7B4706A177C5",
					"appearance_name": "黑色",
					"registration_time": "2022-05-06",
					"where_city_id": "E20AD5D9-D9EB-A977-8F04-F8507DD88BF2",
					"mileage": "12.5万公里",
					"price": "20.00",
					"registration_city_id": "3A7B7BC9-F73F-5950-3EAB-7E0110B36677",
					"transfer_ownership": 1,
					"key": 2,
					"nature_id": "75C47DBF-F2A5-D571-6B62-60A0AD9133ED",
					"inspect_time": "2022-10-01",
					"insure_time": "2012-05-06",
					"describe": "描述一下",
					"owner_source_id": "ABFB4A75-73CB-C836-D577-C23B2C6EB180",
					"standard_id": "7547266D-E1D0-F3D2-4764-5D7896ABF5FE",
					"structure_id": "CB1A053B-6BEA-9C1E-DFD7-D23BA32AFFEE",
					"fuel_type_id": "9E275814-3A10-311C-B584-FCE848D5999C",
					"status": 1,
					"cars_status": 1,
					"displacement_id": "F4731CB7-1DCB-F07E-E7AA-D0BE3D090AD1",
					"case_id": "376125FD-3076-BB11-1131-7B972F2CB0F2",
					"seat_id": "0AFB3C5A-BC5F-FAEE-4234-9C4A9E0D5CE1",
					"province_has_one": {
						"id": "E20AD5D9-D9EB-A977-8F04-F8507DD88BF2",
						"name": "天津"
					},
					"re_province_has_one": {
						"id": "3A7B7BC9-F73F-5950-3EAB-7E0110B36677",
						"name": "石家庄"
					},
					"nature_has_one": {
						"id": "75C47DBF-F2A5-D571-6B62-60A0AD9133ED",
						"name": "租赁非营运"
					},
					"source_has_one": {
						"id": "ABFB4A75-73CB-C836-D577-C23B2C6EB180",
						"name": "车商"
					},
					"standard_has_one": {
						"id": "7547266D-E1D0-F3D2-4764-5D7896ABF5FE",
						"name": "国伍"
					},
					"structure_has_one": {
						"id": "CB1A053B-6BEA-9C1E-DFD7-D23BA32AFFEE",
						"name": "SUV"
					},
					"fuel_type_has_one": {
						"id": "9E275814-3A10-311C-B584-FCE848D5999C",
						"name": "燃油"
					},
					"displacement_has_one": {
						"id": "F4731CB7-1DCB-F07E-E7AA-D0BE3D090AD1",
						"name": "2.0T"
					},
					"case_has_one": {
						"id": "376125FD-3076-BB11-1131-7B972F2CB0F2",
						"name": "双离合变速箱"
					},
					"seat_has_one": {
						"id": "0AFB3C5A-BC5F-FAEE-4234-9C4A9E0D5CE1",
						"name": "7座"
					},
					"cars_name": "奥迪 奥迪A4L 2022 款 改款 xDrive 30Li M运动套装",
					"guide_price": "61.20",
					"purchase_tax": "1.52",
					"car_age": "1年",
					"business": {
						"type_name": "个人",
						"name": "名称",
						"imageurl": "https://img1.baidu.com/it/u=4165578538,1160484955&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
					},
					"collect": 0
					*/
      },
      iamgeSrc:
        "https://img1.baidu.com/it/u=4165578538,1160484955&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      danganContentData: [],
      arrData: [
        "registration_time",
        "mileage",
        "standard_has_one",
        "wh_province_name",
        "re_province_name",
        "displacement_has_one",
        "fuel_type_has_one",
        "case_has_one",
        "car_age",
        "appearance_name",
        "seat_has_one",
        "nature_has_one",
        "inspect_time",
        "insure_time",
        "source_has_one",
      ],
      danganContentDataCache: {
        registration_time: {
          title: "上牌时间",
          name: "",
        }, //  2022-05-06 是String上牌时间
        mileage: {
          title: "表显里程",
          name: "",
        }, // 12.5万公里是String表里程
        standard_has_one: {
          title: "排放标准",
          name: "",
        }, //.name国伍是String排放标准
        wh_province_name: {
          title: "所在地",
          name: "",
        }, //.name天津是String所在地
        re_province_name: {
          title: "上牌地",
          name: "",
        }, //.name石家庄是String上牌地
        displacement_has_one: {
          title: "排量",
          name: "",
        }, //.name2.0T是String排量
        fuel_type_has_one: {
          title: "燃油",
          name: "",
        }, //.name燃油是String燃油类型
        case_has_one: {
          title: "变速箱",
          name: "",
        }, //.name双离合变速箱是String变速箱
        car_age: {
          title: "车龄",
          name: "",
        }, // 1年是String车龄
        appearance_name: {
          title: "车身",
          name: "",
        }, //黑色是String车身
        seat_has_one: {
          title: "座位数",
          name: "",
        }, // 7座是String座位
        nature_has_one: {
          title: "用途",
          name: "",
        }, //租赁非营运是String使用性质

        inspect_time: {
          title: "年检到期时间",
          name: "",
        }, //2022-10-01是String上一次年检
        insure_time: {
          title: "保险到期时间",
          name: "",
        }, //2012-05-06是String保险到期时间
        source_has_one: {
          title: "车源",
          name: "",
        }, //车源信息
      },
    };
  },
  onLoad(option) {
    this.$utils.log(
      "打印二手车详情页面onLoad获取到的参数 " + JSON.stringify(option)
    );
    const value = uni.getStorageSync("login");
    if (value) {
      this.collectionUpdatePost.users_id = value.id;
      this.users_id = value.id;
    }

    const location = uni.getStorageSync("address");
    this.$utils.log(
      "dayiin huoqudao de xinagqing location  " + JSON.stringify(location)
    );
    if (location) {
      this.endName = location.name;
    }

    if (this.card === "") {
      uni.showToast({
        title: "暂无详情信息",
        icon: "none",
      });
    }
    if (option.carId) {
      this.carId = option.carId;
      this.cars_id = option.carId;
      this.collectionUpdatePost.cars_id = option.carId;
    }

    var that = this;
    let eventChannel = this.getOpenerEventChannel();
    if (option.isContent) {
      this.isShareEnterPage = false;
      this.$utils.log(
        "打印 是否是点击分享页面进入 option.isContent 否 " +
          JSON.stringify(option.isContent)
      );
      try {
        // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
        eventChannel.on("acceptDataFromOpenerPage", function (data) {
          that.dataObject = data;
          that.fmObjectToArr(that.dataObject);
        });
      } catch (e) {
        //TODO handle the exception
      }
    } else {
      this.isShareEnterPage = true;
      this.$utils.log(
        "打印 是否是点击分享页面进入 option.isContent 是 " +
          JSON.stringify(option.isContent)
      );
      getUsedCarDetails(this.carId, this.users_id, this.endName).then((res) => {
        that.$utils.log(
          "dayiin huoqudao de xinagqing xinxi  " + JSON.stringify(res)
        );
        if (res.code == 0) {
          that.dataObject = res.data;
          that.fmObjectToArr(that.dataObject);
        } else {
          uni.showToast({
            title: res.message,
            icon: "none",
          });
        }
      });
    }

    // #ifdef  MP-WEIXIN
    const data = {
      id: this.carId,
      state: 2,
    };
    // wxShare(data).then((res) => {
    //   that.$utils.log("打印分享的数据 ------   " + JSON.stringify(res));
    //   if (res.code == 0) {
    //     that.title = res.data.title; //分享的名称
    //     that.imageUrl = res.data.imgUrl; //分享的图片地址
    //   }
    // });
    //微信小程序
    uni.showShareMenu({
      withShareTicket: true,
      //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
      menus: ["shareAppMessage"],
    });
    // #endif
  },
  //分享给朋友
  onShareAppMessage(object) {
    return {
      title: this.title, //分享的名称
      path:
        "/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=" +
        this.carId,
      imageUrl: this.imageUrl, //分享的图片地址
    };
  },
  // //分享到朋友圈
  // onShareTimeline(res) {
  // 	return {
  // 		title: this.title, //分享的名称
  // 		path: '/pages/home/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=' + that.carId,
  // 		imageUrl: this.imageUrl, //分享的图片地址
  // 		type: 0,
  // 		query: 'carId=' + this.carId,
  // 		summary: ""
  // 	}
  // },

  methods: {
    //点击详情页面中的地图按钮
    locationClick() {
      // #ifdef  MP
      if (this.dataObject.business.lat) {
        uni.openLocation({
          latitude: Number(this.dataObject.business.lat),
          longitude: Number(this.dataObject.business.long),
          success: function (res) {},
          fail: function (e) {},
        });
      }
      // #endif
    },
    //分享进入详情页面点击返回 返回首页
    shareBack() {
      if (this.isShareEnterPage) {
        this.$utils.log(
          "打印点击返回按钮 跳转首页 " + JSON.stringify(this.isShareEnterPage)
        );
        uni.switchTab({
          url: "/main/home/index/index",
        });
      } else {
        this.$utils.log(
          "打印点击返回按钮 返回上一页 " + JSON.stringify(this.isShareEnterPage)
        );
      }
    },

    /**
     *
     *data.registration_time 2022-05-06 是String上牌时间
     *data.mileage 12.5万公里是String表里程
     *data.standard_has_one.name国伍是String排放标准
     *data.province_has_one.name天津是String所在地
     *data.re_province_has_one.name石家庄是String上牌地
     *data.displacement_has_one.name2.0T是String排量
     *data.fuel_type_has_one.name燃油是String燃油类型
     *data.case_has_one.name双离合变速箱是String变速箱
     *data.car_age 1年是String车龄
     *data.appearance_name黑色是String车身
     *data.seat_has_one.name 7座是String座位
     *data.nature_has_one.name租赁非营运是String使用性质
     *data.inspect_time2022-10-01是String上一次年检
     *data.insure_time2012-05-06是String保险到期时间
     * */
    //duixiang zhuanshuzu
    fmObjectToArr(objectData) {
      //danganContentDataCache

      for (let key in objectData) {
        if (this.arrData.includes(key)) {
          if (objectData[key]) {
            if (typeof objectData[key] == "object") {
              this.$utils.log(
                "进入了for循环  object  " + JSON.stringify(objectData[key])
              );
              if (objectData[key].name) {
                this.danganContentDataCache[key].name = objectData[key].name;
              }
            } else if (typeof objectData[key] == "string") {
              this.$utils.log(
                "进入了for循环  string  " + JSON.stringify(objectData[key])
              );
              this.danganContentDataCache[key].name = objectData[key];
            }
          }
        }
      }
      for (let key in this.danganContentDataCache) {
        this.danganContentData.push(this.danganContentDataCache[key]);
      }
    },

    //收藏的方法
    pagecollectionUpdate() {
      var that = this;
      collectionUpdate(this.collectionUpdatePost).then((res) => {
        that.$utils.log("danui fanjui de shuju " + JSON.stringify(res));
        that.collectIsShow = false;
        that.$nextTick(() => {
          if (that.dataObject.collect == 1) {
            that.dataObject.collect = 0;
          } else {
            that.dataObject.collect = 1;
          }
          that.collectIsShow = true;
          that.$forceUpdate();
        });
      });
    },
    footerClick(inta) {
      switch (inta + "") {
        case "1": {
          this.$utils.log("点击了店铺按钮");
          uni.navigateTo({
            url:
              "/pages/home/carDealer/carDealer?position=" +
              this.dataObject.users_id,
          });
          break;
        }
        case "2": {
          this.$utils.log("点击了收藏按钮");
          if (this.collectionUpdatePost.users_id) {
            this.pagecollectionUpdate();
          } else {
            uni.showToast({
              title: "收藏需要登录，请登录",
              icon: "none",
              duration: 2500,
            });
          }

          break;
        }
        case "3": {
          this.$utils.log("点击了联系卖家");
          if (this.dataObject.business.mobile) {
            uni.makePhoneCall({
              phoneNumber: this.dataObject.business.mobile,
            });
          } else {
            uni.navigateTo({
              url: "/pages/message/message/chat/chat",
            });
          }

          break;
        }
      }
    },
    // 预览图片
    previewImagePage(inta) {
      if (this.dataObject.cover_url) {
        if (this.dataObject.cover_url.length > 0) {
          let urls = this.dataObject.cover_url;
          uni.previewImage({
            current: urls[inta],
            urls: urls,
          });
        } else {
          uni.showToast({
            title: "暂无图片",
            icon: "none",
          });
        }
      } else {
        uni.showToast({
          title: "暂无图片",
          icon: "none",
        });
      }
    },
    // 查看商家信息
    dealerHandler: function () {
      uni.navigateTo({
        url:
          "/pages/home/carDealer/carDealer?position=" +
          this.dataObject.users_id,
      });
    },
    btnClick(inta) {
      switch (inta + "") {
        case "1": {
          this.$utils.log("点击了配置按钮");
          uni.navigateTo({
            url: "/pages/home/secondhandCar/carConfig/index",
          });
          break;
        }
        case "2": {
          this.$utils.log("点击了分享按钮");

          // #ifdef  MP-WEIXIN
          //微信小程序
          // uni.shareAppMessage({
          // 	title: '分享标题',
          // 	path: '/pages/index/index',
          // 	imageUrl: '分享封面图',
          // 	success: function() {
          // 		console.log('分享成功')
          // 	}
          // })
          // #endif
          break;
        }
        case "3": {
          this.$utils.log("点击了地址按钮");
          uni.navigateTo({
            url:
              "/pages/home/logistics/logistics?startName=" +
              this.dataObject.province_has_one.name,
          });
          break;
        }
        case "4": {
          this.$utils.log("点击了查看全部图片");
          this.previewImagePage(0);
          break;
        }
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #fcfcfc;
}

.imageSwiperClass {
  background: #ffffff;
  opacity: 1;
  height: 600rpx;
  width: 100%;
  swiper-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .swiper-bg-img{
	  width: 100%;
	  height: 100%;
	  background-size: cover !important;
	  background-repeat: no-repeat !important;
	  background-position: center center !important;
  }
}

.page-wraper {
  /* 父元素设置相对定位 */
  position: relative;
}

.header-class {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 11;
}

.image-Class {
  width: 100%;
  height: auto;
}

.details-content-box {
  display: flex;
  flex-direction: column;
  /* 父元素设置相对定位 */
  position: relative;
  /* 设置绝对定位 */
  position: absolute;
  top: 580rpx;
  width: 100%;
  /* background-color: transparent; */
  /* backdrop-filter: blur(20px);//毛玻璃属性 */

  border-radius: 20rpx;
  margin-bottom: 10rpx;
  .aasda {
    background-image: linear-gradient(
      to bottom,
      #ccccccff 0%,
      #fff 50%,
      #fff 100%
    );
  }
}

.footer-view {
  width: 100%;
  height: 130rpx;
}

.image-icon-class {
  width: 54rpx;
  height: 54rpx;
  margin-right: 10rpx;
}

.config-share-text {
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
  // color: #ffffff;
  opacity: 1;
  background-color: #ffffff00;
}

.config-share-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 28rpx 0rpx 20rpx;
}

.car-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.config-share-view {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10rpx;
  margin-left: 10rpx;
}

.config-share-view-box {
  // display: flex;
  // flex-direction: row;
  // justify-content: center;
  // align-items: center;
  width: 150rpx;
  height: 100rpx;
  position: absolute;
  top: 10rpx;
  right: 20rpx;
}

.config-share1 {
  flex: 1;
}

.new-price-box-class {
  display: flex;
  flex-direction: row;
}

.price-view-box {
  /* 设置绝对定位 */
  position: absolute;
  /* 距离父元素上边缘 50px */
  left: 48rpx;
  top: -40rpx;
  display: flex;
  flex-direction: row;
  border-radius: 50rpx;
  background: linear-gradient(to right, #9bb2ef 0%, #638ef2 50%, #9bb2ef 100%);
  padding: 10rpx 20rpx;
  justify-content: center;
  align-items: center;
}

.price-view-text {
  margin: 5rpx 20rpx;

  font-size: 48rpx;
  font-family: DIN Alternate;
  font-weight: bold;
  color: #ffffff;
  opacity: 1;
}

.price-view-wan {
  margin: 0rpx 20rpx 0rpx 0rpx;

  font-size: 36rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  opacity: 1;
}

.view-box {
  border-radius: 20rpx;
  /* background: linear-gradient(to top right, white 50%, #D4E8FD 100%);
		 */
  background: linear-gradient(to right, white 50%, rgb(200, 230, 253) 120%);
  padding: 50rpx 24rpx;
  margin: 10rpx 28rpx;
}

.view-box-1 {
  border-radius: 20rpx;
  /* background: linear-gradient(to top right, white 50%, #E1EAFB 100%); */
  background: linear-gradient(to top right, white 65%, rgb(212, 226, 251) 100%);
  margin: 16rpx 28rpx;
  padding: 24rpx 24rpx 0rpx 24rpx;
}

.view-box-2 {
  border-radius: 20rpx;
  background: #fff;
  margin: 16rpx 28rpx;
  padding: 28rpx 28rpx 0rpx 22rpx;
}

.new-price {
  margin-top: 25rpx;
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #1d2125;
  opacity: 1;
  margin-right: 18rpx;
}

.car-title {
  margin: 20rpx 0rpx;
  font-size: 32rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: bold;
  color: #1d2125;
  opacity: 1;
  line-height: 1.5;
}

.page-footer {
  /* 不放大不缩小固定100rpx */
  display: flex;
  background-color: #fff;
  padding: 20rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
}

.item_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0rpx 20rpx;
}

.dangan-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20rpx 0rpx;
}

.dangan-text {
  margin-right: 0rpx;
  margin-top: 30rpx;

  font-size: 24rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 500;
  color: #000026;
  opacity: 1;
}

.dangan-text-miaoshu {
  margin-right: 20rpx;
  margin-top: 30rpx;

  font-size: 24rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 500;
  color: #000026;
  opacity: 1;
}

.dangan-content {
  flex: 1;
}

.refer-view-class {
  width: 544rpx;
  min-height: 96rpx;
  background: #f5f5f5;
  opacity: 1;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
}

.refer-text-class {
  font-size: 24rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 400;
  color: #999999;
  opacity: 1;
}

.car-content-title {
  width: 130rpx;
  font-size: 28rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 500;
  color: #000026;
  background: url("/static/bac-small.png") repeat;
  background-size: 100% 100%; //背景图片能够显示全
}

.content-text {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  opacity: 1;
}

.footer-image-icon-class {
  width: 40rpx;
  min-height: 40rpx;
}

.footer-text-class {
  text-align: center;
  white-space: nowrap;
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #1c2125;
  opacity: 1;
}

.item_buy {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #4e6ecc;
  margin-left: 10rpx;
  border-radius: 20rpx;
  font-weight: bolder;
  margin-right: 50rpx;

  font-size: 32rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  opacity: 1;
}

.location-box {
  margin-top: 18rpx;
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 26rpx 32rpx 26rpx 20rpx;
  border-radius: 14rpx;
  background-image: url("@/static/store-location-bac.png");
  background-size: 100%;
}

.location-image-head {
  width: 78rpx;
  height: 78rpx;
  border-radius: 50%;
  opacity: 1;
}

.location-view-box {
  flex: 1;
  margin-left: 24rpx;
}

.location-image-icon {
  width: 54rpx;
  height: 54rpx;
}

.car-store-text {
  margin-bottom: 4rpx;
  font-size: 28rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 500;
  color: #1d2125;
  opacity: 1;
}

.car-location-text {
  font-size: 24rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 400;
  color: #999999;
  opacity: 1;
}

.image-view-bg {
  width: 100%;
  border-radius: 14rpx;
  margin-top: 20rpx;
  height: 372rpx;
  background: #ffffff;
}

.iamge-view-small-box {
  width: 100%;
  height: auto;
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.iamge-view-small {
  flex: 1;
  width: 100%;
  height: 184rpx;
  border-radius: 14rpx;
  margin: 0rpx 5rpx;
}

.look-all-image-view {
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
  padding: 20rpx;
  opacity: 1;
  border-radius: 14rpx;
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}

.logistics-price-view-box {
  height: auto;
  background: #f7f9ff;
  opacity: 1;
  border-radius: 14rpx;
  padding-bottom: 34rpx;
}

.content-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.single_Arrow_image_class {
  width: 60rpx;
  height: 15rpx;
  height: auto;
  opacity: 0.21;
}

.logistics-price-view-item-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logistics-price-text-view {
  font-size: 24rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 400;
  color: #666666;
  opacity: 1;
  margin-top: 40rpx;
}

.logistics-price-city-text-name {
  font-size: 36rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 500;
  color: #333333;
  opacity: 1;
}

.logistics-price-text-view-class {
  font-size: 22rpx;
  font-family: Alimama ShuHeiTi;
  font-weight: 400;
  color: #0e59ea;
  opacity: 1;
}

.view-box-3 {
  border-radius: 20rpx;
  background: #fff;
  margin: 16rpx 28rpx;
  padding: 18rpx 0rpx;
}

.marginleft22 {
  margin-left: 22rpx;
  margin-bottom: 12rpx;
}

.logistics-price-white-right {
  width: 12.44rpx;
  height: 22.31rpx;
  margin-left: 24rpx;
}

.more-logistcs-price-btn {
  width: 302rpx;
  height: 66rpx;
  background: #0e59ea;
  opacity: 1;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  opacity: 1;
  margin-top: 32rpx;
}

button::after {
  border: none;
}

button {
  background-color: #fff;
}

.share {
  border-radius: 50%;
  position: absolute;
  right: 0%;
}

.shareBtn {
  width: 150rpx;
  height: 100rpx;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}
</style>